<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑美食信息</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- BS4依赖 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- json依赖 -->
    <script src="js/json2.js"></script>
    <script>
        // 根据美食id获取美食信息，方便客户修改美食信息
        var id = window.location.href.split("=")[1];
        $.ajax({
            url: "selectCate",
            type: "post",
            data: {"cateId": id},
            dataType: "json",
            success: function (data) {
                // 成功获取服务器发送的美食信息
                var cate = data;
                $("#pic").attr("src", cate.cateImage);
                $("#cateName").val(cate.cateName);
                $("#cateType").val(cate.cateType);
                $("#cateMaterial").val(cate.foodMaterial);
                $("#ingredients").val(cate.ingredients);
                $("#level").val(data.level);
                // 正则匹配数字和中文（用于设置美食制作时间，区分数字和中文）
                var time = cate.elapsedTime;
                var num = time.match(/\d+/g);
                var str = time.match(/[\u4e00-\u9fa5]{2,}/);
                $("#elapsedTime").val(num);
                $("#timeType").val(str);
                $("#guide").val(cate.guide);
            },
            error: function () {
                alert("无法获取美食信息！！");
            }
        });

        // 客户更改美食信息
        var cateInfo = {};
        $(function () {
            $("#submit").click(function () {
                cateInfo.cateId = id;
                cateInfo.cateName = $("#cateName").val();
                cateInfo.cateType = $("#cateType").val();
                cateInfo.cateImage = $("#pic").attr("src");
                cateInfo.foodMaterial = $("#cateMaterial").val();
                cateInfo.ingredients = $("#ingredients").val();
                cateInfo.elapsedTime = $("#elapsedTime").val() + $("#timeType").val();
                cateInfo.guide = $("#guide").val();
                cateInfo.level = $("#level").val();
                var cateJson = JSON.stringify(cateInfo);
                $.ajax({
                    url : "editCate",
                    type: "post",
                    data: {"cate":cateJson},
                    success:function (data) {
                        if (data == "ok") {
                            alert("更新成功！");
                            window.parent.location.href = "center.html";
                        } else {
                            alert("修改美食信息失败！！");
                        }
                    },
                    error:function () {
                        alert("系统错误！！");
                    }
                })
            })
        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-8">
            <form id="picUpload" action="" method="post" enctype="multipart/form-data">
                <br>
                <img id="pic" src="" style="width: 300px; height: 280px;">
            </form>
            <form id="cateInfo" action="" method="post">
                <div class="form-group">
                    <label for="cateName">品名：</label>
                    <input type="text" class="form-control" id="cateName" placeholder="为这道美食起个名字吧">
                </div>
                <div class="form-group">
                    <label for="cateType">类型：</label>
                    <select class="form-control" id="cateType">
                        <option>热菜</option>
                        <option>凉菜</option>
                        <option>主食</option>
                        <option>小吃</option>
                    </select>
                </div>
            </form>
            <p>图片：</p>
            <div class="custom-file mb-3">
                <input type="file"  id="myUpload" name="myUpload" class="custom-file-input" onchange="ajaxFileUpload()">
                <label class="custom-file-label" for="myUpload">选择文件</label>
            </div>
            <div class="form-group">
                <label for="cateMaterial">原料：</label>
                <input type="text" class="form-control" id="cateMaterial" placeholder="这道美食需要的原料" form="cateInfo">
            </div>
            <div class="form-group">
                <label for="ingredients">辅料：</label>
                <input type="text" class="form-control" id="ingredients" placeholder="这道美食需要的辅料" form="cateInfo">
            </div>

            <div class="form-group">
                <label for="level">难度：</label>
                <select class="form-control" id="level" form="cateInfo">
                    <option>简单</option>
                    <option>适中</option>
                    <option>较难</option>
                </select>
            </div>
            <div class="form-group">
                <label for="elapsedTime">耗时：</label><br>
                <div class="custom-control-inline">
                    <input type="text" class="form-control" id="elapsedTime" placeholder="请输入阿拉伯数字" form="cateInfo">
                    <select id="timeType" form="cateInfo">
                        <option>分钟</option>
                        <option>小时</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="guide">制作指南：</label>
                <textarea class="form-control" rows="5" id="guide" form="cateInfo"></textarea>
            </div>
            <button type="button" class="btn btn-info" id="submit">确定修改</button>
            </form>
        </div>
        <div class="col-2"></div>
    </div>
</div>

</body>
</html>